async function submitMessage() {
    const message = document.getElementById('message').value;
    const chatBox = document.getElementById('chat-box');
    const selectedApi = document.getElementById('api-select').value;

    if (message.trim() === "") return;

    // 显示用户输入的消息
    displayMessage(message, 'user');

    // 清空输入框
    document.getElementById('message').value = '';

    // 创建机器人消息元素并显示加载状态
    const botMessageElement = document.createElement('div');
    botMessageElement.classList.add('message', 'bot-message');
    botMessageElement.innerHTML = `<span class="loading"></span>`;
    chatBox.appendChild(botMessageElement);

    // 更新聊天框位置
    chatBox.scrollTop = chatBox.scrollHeight;

    try {
        if (selectedApi === '/ai/tongyi/stream') {
            // 流式接口
            const eventSource = new EventSource(`${selectedApi}?message=${encodeURIComponent(message)}`);

            let botMessage = '';  // 用于拼接机器人返回的消息

            eventSource.onmessage = function (event) {
                const data = event.data;
                botMessage += data;  // 拼接每次返回的消息

                // 更新机器人的消息
                botMessageElement.innerHTML = `
                    <span class="message-bubble">${botMessage}</span>
                    <span class="timestamp">${getCurrentTime()}</span>
                    <span class="model-name">${getModelName(selectedApi)}</span>
                `;
                chatBox.scrollTop = chatBox.scrollHeight; // 滚动到最新消息
            };

            eventSource.onerror = function (error) {
                console.error('Error:', error);
                eventSource.close();
            };
        } else {
            // 非流式接口，直接使用text获取返回内容
            const response = await fetch(`${selectedApi}?message=${encodeURIComponent(message)}`);
            const botMessage = await response.text(); // 获取纯文本响应

            // 更新机器人回复
            botMessageElement.innerHTML = `
                <span class="message-bubble">${botMessage}</span>
                <span class="timestamp">${getCurrentTime()}</span>
                <span class="model-name">${getModelName(selectedApi)}</span>
            `;
            chatBox.scrollTop = chatBox.scrollHeight;
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

function displayMessage(message, sender) {
    const chatBox = document.getElementById('chat-box');
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', `${sender}-message`);
    messageElement.innerHTML = `
        <span class="message-bubble">${message}</span>
        <span class="timestamp">${getCurrentTime()}</span>
    `;
    chatBox.appendChild(messageElement);
    chatBox.scrollTop = chatBox.scrollHeight;
}

function getCurrentTime() {
    const now = new Date();
    return now.toLocaleTimeString().slice(0, 5);
}

function getModelName(api) {
    if (api === '/ai/tongyi/stream') return '通义千问的流式返回';
    if (api === '/ai/tencent/example') return '腾讯云-DeepSeek-R1-Lite模型';
    if (api === '/ai/tongyi/example') return '通义千问的接口返回';
    return '';
}

document.getElementById('message').addEventListener('keypress', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        submitMessage();
    }
});
